import AutoSizer from 'react-virtualized-auto-sizer';

import Menu from './Menu';
import Row from './Row';
import HeaderRow from './HeaderRow';
import {ScrollView} from './ScrollView';
import { useRef } from 'react';
import useEdit from './use-edit';

export default ({state, data:initData, className, style}) => {

  const scrollViewRef = useRef();

  const {
    path, 
    data, 
    enter,
    leave,
    update,
    setSorter,
    setFilter,
  } = useEdit(initData, state.schema)

  const {editable, linkable} = state;

  const topWidget = <>
    <HeaderRow {...{state, setSorter, setFilter}} />
    {path.map((_, index) => <Row {...{state, key: index, index, data: path, select:leave}} />)}
  </>

  const scrollViewHoc = ({height}) => <>
    <ScrollView {...{height, ref: scrollViewRef, state, data, Row, topWidget, update, select:enter, editable, linkable}}/>
  </>

  return <AutoSizer {...{disableWidth: true, className, style}}>
    {scrollViewHoc}
  </AutoSizer>

}